
<template>
  <div class="showStudents">
    <el-dialog
      title="得分项"
      append-to-body
      :visible.sync="showStudentsFlag"
      width="1000px"
      :before-close="showStudentsClose">
      <div class="inner inner-content-box">
        <div class="box_title">
          <div class="title-inner">
            <p class="first">考题：</p>
            <p class="second" style="color: #00b99e;">{{ stationStudentsObj.examinationName }}</p>
          </div>
          <div class="title-inner">
            <p class="first" style="font-weight: 400;font-size: 14px;">考试：</p>
            <p class="second" style="font-weight: 500;font-size: 14px;">{{ recordsObj.recordsName }}</p>
          </div>
          <div class="title-inner">
            <p class="first" style="font-weight: 400;font-size: 14px;">起止日期：</p>
            <p class="second" style="font-weight: 500;font-size: 14px;">{{ scoreInfo.examStartDate }} 至 {{ scoreInfo.examEndDate }}</p>
          </div>
        </div>
        <div class="searchBox">
          <el-form
            :inline="true"
            :model="searchForm"
            size="small"
            style="width: 100%"
          >
            <el-form-item label="得分项名称">
              <el-input
                v-model="searchForm.scoreItem"
                placeholder="得分项名称"
                clearable
                style="width: 260px"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="getList"
                size="small"
                icon="el-icon-search"
                >搜索</el-button
              >
              <el-button @click="searchReset" size="small" icon="el-icon-delete"
                >清空</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        
        <div class="detailsBox" >
          <ag-grid-vue
            class="ag-theme-alpine ag-theme-quartz"
            style="height: calc( 100vh - 400px )"
            :gridOptions="gridOptions"
            :localeText="localeText"
            @grid-ready="onGridReady"
            @sort-changed="onSortChangedAggrid"
            @filter-changed="onFilterChangedAggrid"
            :rowHeight="38"
            :headerHeight="42"
            :columnDefs="columnDefs"
            :defaultColDef="defaultColDef"
            :rowData="scoreInfoList"
            rowSelection="multiple"
            :rowMultiSelectWithClick="true"
            :enableRangeSelection="true"
          >
          </ag-grid-vue>
        </div>
        <!-- <div class="pageBox">
          <div>
          </div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-sizes="page.pageSizes"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
          >
          </el-pagination>
        </div> -->
      </div>
    </el-dialog>
    <buJiGeStudent ref="buJiGeStudent" :examScoreSet='scoreInfo.examScoreSet' :stationStudentsObj='stationStudentsObj' :chooseStudent='chooseStudent' :recordsObj='recordsObj'></buJiGeStudent>

  </div>
</template>

<script>
import { examResultScore } from '@/api/examinationScore.js'
import buJiGeCount from '@/views/modules/examinationScore/buJiGeCount/buJiGeCount.vue'
import buJiGeStudent from '@/views/modules/examinationScore/buJiGeStudent/buJiGeStudent.vue'
export default {
  props: ['showStudentsFlag', 'stationStudentsObj', 'recordsId', 'studentType', 'recordsObj'],
  components: {
    buJiGeCount,
    buJiGeStudent
  },
  data () {
    return {
      dataList: [
        {
          id: 0,
          title: '考站维度'
        },
        {
          id: 1,
          title: '考题维度'
        },
        {
          id: 2,
          title: '得分项维度'
        },
        {
          id: 3,
          title: '考生维度'
        }
      ],
      activeKey: 0,
      gridOptions: null,
      localeText: this.$AG_GRID_LOCALE_ZZZ,
      col: [],
      page: {
        pageSizes: [100, 2000, 5000],
        currentPage: 1,
        total: 0,
        pageSize: 100
      },
      searchForm: {
        scoreItem: ''
      },
      defaultColDef: {
        editable: false,
        sortable: true,
        resizable: true,
        filter: true,
        cellDataType: false
      },
      rowIndexArr: [
        {
          field: 'rowIndex',
          headerName: '序号',
          width: 70,
          checkboxSelection: false,
          headerCheckboxSelection: false,
          sortable: false,
          pinned: 'left',
          valueGetter: (params) => {
            // 返回当前行的序号
            return params.node.rowIndex + 1
          }
        },
        {
          headerName: '最高分考生',
          field: 'zuidaStudentName',
          filter: 'zuidaStudentName',
          tooltipField: 'zuidaStudentName',
          width: 120,
          id: 103,
          sortable: true,
          resizable: true,
          hide: false,
          editable: false,
          tooltipComponentParams: {
            'color': '#55AA77'
          }
        },
        {
          headerName: '最高分',
          field: 'zuidaScore',
          filter: 'zuidaScore',
          tooltipField: 'zuidaScore',
          width: 100,
          id: 103,
          sortable: true,
          resizable: true,
          hide: false,
          editable: false,
          tooltipComponentParams: {
            'color': '#55AA77'
          }
        },
        {
          headerName: '最低分考生',
          field: 'zuidiStudentName',
          filter: 'zuidiStudentName',
          tooltipField: 'zuidiStudentName',
          width: 120,
          id: 103,
          sortable: true,
          resizable: true,
          hide: false,
          editable: false,
          tooltipComponentParams: {
            'color': '#55AA77'
          }
        },
        {
          headerName: '最低分',
          field: 'zuidiScore',
          filter: 'zuidiScore',
          tooltipField: 'zuidiScore',
          width: 100,
          id: 103,
          sortable: true,
          resizable: true,
          hide: false,
          editable: false,
          tooltipComponentParams: {
            'color': '#55AA77'
          }
        },
        {
          headerName: '平均分',
          field: 'pingjunScore',
          filter: 'pingjunScore',
          tooltipField: 'pingjunScore',
          width: 100,
          id: 103,
          sortable: true,
          resizable: true,
          hide: false,
          editable: false,
          tooltipComponentParams: {
            'color': '#55AA77'
          }
        },
        {
          headerName: '考题总分',
          field: 'totalScore',
          filter: 'totalScore',
          tooltipField: 'totalScore',
          width: 100,
          id: 103,
          sortable: true,
          resizable: true,
          hide: false,
          editable: false,
          tooltipComponentParams: {
            'color': '#55AA77'
          }
        },
        {
          headerName: '不及格人数',
          field: 'bujigeCount',
          filter: 'bujigeCount',
          tooltipField: 'bujigeCount',
          width: 120,
          id: 103,
          sortable: true,
          resizable: true,
          hide: false,
          editable: false,
          tooltipComponentParams: {
            'color': '#55AA77'
          },
          cellRenderer: 'buJiGeCount',
          pinned: 'right'
        }
      ],
      bigScoreArr: [
        {
          headerName: '得分项',
          field: 'scoreCardItem',
          filter: 'scoreCardItem',
          tooltipField: 'scoreCardItem',
          width: 350,
          id: 103,
          sortable: true,
          resizable: true,
          hide: false,
          editable: false,
          tooltipComponentParams: {
            'color': '#55AA77'
          },
          pinned: 'left'
        }
      ],
      smallScoreArr: [
        {
          headerName: '得分项',
          field: 'scoreCardScoringCriteria',
          filter: 'scoreCardScoringCriteria',
          tooltipField: 'scoreCardScoringCriteria',
          width: 350,
          id: 103,
          sortable: true,
          resizable: true,
          hide: false,
          editable: false,
          tooltipComponentParams: {
            'color': '#55AA77'
          },
          pinned: 'left'
        }
      ],
      columnDefs: [],
      gridApi: null,
      chooseStudent: {},
      scoreInfo: {},
      scoreInfoList: []
    }
  },
  beforeMount () {
    this.gridOptions = {
      // 通过这个属性建立了上下文引用
      context: { componentParent: this }
      // 说人话就是可以在自己声明的组件里调用到父组件的方法和属性了
    }
  },
  methods: {
    showStudentsClose () {
      this.$emit('showStudentsClose')
    },
    // 查看学生
    viewStudentHandle (val) {
      if (val.bujigeCount === 0) {
        this.$message.warning('暂无不及格考生')
        return
      }
      this.chooseStudent = val
      this.$refs.buJiGeStudent.showBuJiGeStudentsHandle()
    },
    // 装载列表
    onGridReady (params) {
      this.gridApi = params.api
    },
    onSortChangedAggrid (event) {
      const api = event.api
      const visibleRowCount = api.getDisplayedRowCount()
      for (let i = 0; i < visibleRowCount; i++) {
        const rowNode = api.getDisplayedRowAtIndex(i)
        console.log(rowNode)
      }
      let aaa = JSON.parse(JSON.stringify(this.scoreInfoList))
      if (this.gridApi.getRenderedNodes().length > 1) {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[1].rowIndex - 1
      } else {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[0].rowIndex
      }
      setTimeout(() => {
        this.scoreInfoList = JSON.parse(JSON.stringify(aaa))
        setTimeout(() => {
          if (this.aggridScrollNum !== 0) {
            this.gridApi.ensureIndexVisible(this.aggridScrollNum, 'top')
          }
        }, 10)
      }, 10)
    },
    onFilterChangedAggrid (event) {
      const api = event.api
      const visibleRowCount = api.getDisplayedRowCount()
      for (let i = 0; i < visibleRowCount; i++) {
        const rowNode = api.getDisplayedRowAtIndex(i)
        console.log(rowNode)
      }
      let aaa = JSON.parse(JSON.stringify(this.scoreInfoList))
      if (this.gridApi.getRenderedNodes().length > 1) {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[1].rowIndex - 1
      } else {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[0].rowIndex
      }
      setTimeout(() => {
        this.scoreInfoList = JSON.parse(JSON.stringify(aaa))
        setTimeout(() => {
          if (this.aggridScrollNum !== 0) {
            this.gridApi.ensureIndexVisible(this.aggridScrollNum, 'top')
          }
        }, 10)
      }, 10)
    },
    onStudentsShow () {
      this.getHeadersCol()
      this.searchReset()
    },
    // 获取表头
    getHeadersCol () {
      this.columnDefs = []
      setTimeout(() => {
        this.columnDefs = this.rowIndexArr.concat(this.col)
        console.log(this.columnDefs, 222)
      }, 10)
    },
    getList () {
      let params = Object.assign({
        recordsId: this.recordsId,
        examinationId: this.stationStudentsObj.examinationId,
        page: this.page.currentPage,
        limit: this.page.pageSize,
        scoreCardItem: this.searchForm.scoreItem,
        scoreCardScoringCriteria: this.searchForm.scoreItem
      })
      examResultScore(params).then(res => {
        this.scoreInfo = res.data.data
        // 获取表头  examScoreSet 1:大分项    2:小分项
        this.columnDefs = []
        if (this.scoreInfo.examScoreSet === '1') {
          this.columnDefs = this.rowIndexArr.concat(this.bigScoreArr)
        } else {
          this.columnDefs = this.rowIndexArr.concat(this.smallScoreArr)
        }
        setTimeout(() => {
          this.scoreInfoList = this.scoreInfo.examScoreVoList
          this.scoreInfoList.map(v => {
            v.zuidaScore = v.zuida.score
            v.zuidaStudentName = v.zuida.studentName.substring(1)
            v.zuidiScore = v.zuidi.score
            v.zuidiStudentName = v.zuidi.studentName.substring(1)
            v.pingjunScore = v.pingjun.score
          })
          console.log(this.scoreInfoList)
        }, 10)
      })
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.page.currentPage = val
      this.getList()
    },
    // 清空搜索
    searchReset () {
      this.searchForm = {
      }
      this.page.currentPage = 1
      this.getList()
    }
  }
}
</script>

<style lang='scss'>
  .showStudents{
    background: pink;
  }
  .box_title{
    height: 40px;
    width: 100%;
    background: #00b99e20;
    margin: 10px 0;
    border-radius: 6px;
    display: flex;
    font-size: 16px;
    padding-left: 10px;
    justify-items: center;
    align-items: center;
    .title-inner{
      display: flex;
      .first{
        padding-right: 2px;
        color: #666;
      }
      .second{
        padding-right: 40px;
        font-weight: 500;
      }
    }
  }
</style>